<template>
  <div class="diyCategory">
    <div class="contenBox">
      <template v-for="(item, index) in components">
        <search :id="item.id" :component_key="item.component_key" :datas="item.remote_data" :key="index" v-if="item.component_key == 'U_search'"></search>
        <div style="flex: 1; overflow: hidden; height: 0;" :key="index" v-if="item.component_key == 'U_categorySort'">
          <categorySort ref="categorySortRef" @AddCartMethod="AddCart" :id="item.id" :component_key="item.component_key" :datas="item.remote_data"></categorySort>
        </div>
        <categoryCart
          ref="categoryCartRef"
          @cartShowClose="cartShowClose"
          :id="item.id"
          :component_key="item.component_key"
          v-if="item.component_key == 'U_cartSettlement'"
          :datas="item.remote_data"
          :key="index"
        ></categoryCart>
        <U_suspendbutton :id="item.id" :component_key="item.component_key" v-if="item.component_key == 'U_suspendbutton'" :datas="item.remote_data" :key="index"></U_suspendbutton>
      </template>
    </div>
  </div>
</template>
<script>
import U_suspendbutton from "components/new_diy/suspendbutton";
export default {
  data() {
    return {
      components: []
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    AddCart() {
      this.$refs.categoryCartRef[0].cart_ids = [];
      this.$refs.categoryCartRef[0].getCart();
    },
    cartShowClose(e) {
      console.log(this.$refs.categorySortRef);
      this.$refs.categorySortRef[0].updateData();
    },
    getData() {
      $http.get("home-page.index", { page_id: this.$route.query.page_id }, "加载中").then(
        response => {
          this.isLoadMore = true;
          if (response.result === 1) {
            this.components = response.data.item.datas;
            this.fun.setWXTitle(response.data.item.page_name);
            //分享
            this.fun.wxShare(
              "",
              { mid: this.fun.getKeyByMid() },
              {
                title: response.data.item.page_title,
                imgUrl: response.data.item.page_icon,
                description: response.data.item.page_description
              }
            );
          }
        },
        function (response) {
          // error callback
        }
      );
    }
  },
  components: {
    search: () => import("../../../components/new_diy/search.vue"),
    categorySort: () => import("../../../components/new_diy/categorySort.vue"),
    categoryCart: () => import("../../../components/new_diy/categoryCart.vue"),
    U_suspendbutton
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>